<template>
  <div>
    <div class="plan-desc">
      <h3 class="font-24">推广计划</h3>
      <p class="font-14">采用项目制营销管理，让合作数据更加清晰明了。通过计划内红人数据共享、合作进度共同管理等方式，高效提升团队协作效率。</p>
      <p class="font-14">基于不同产品的红人推广节奏，综合监控各项红人营销数据指标，优化品牌营销策略。</p>
    </div>
    <div class="plan-content">
      <div class="flex-between flex-align-items-center">
        <div class="status-list flex flex-align-items-center">
          <p v-for="(item, index) in statusList" :key="index" class="font-12 pointer flex-center flex-align-items-center"
            :class="{ active: item.value === form.status }" @click="statusChange(item.value)">
            {{ item.name }}{{ item.count > 0 ? `(${item.count})` : '' }}
          </p>
        </div>
        <div class="search">
          <el-input v-model="form.keyword" type="text" placeholder="搜索" maxlength="20" />
          <p class="pointer flex-center flex-align-items-center">
            <i class="iconfont icon-sousuo"></i>
          </p>
        </div>
      </div>
      <no-data v-if="list.length === 0" style="margin-top: 150px;"></no-data>

      <div v-else>
        <div class="list">
          <div v-for="(item, index) in list" :key="item.id" class="item flex flex-align-items-center pointer"
            @click="toDetail(item.id)">
            <div class="item-info">
              <p class="font-18-B">{{ item.name }}</p>
              <p class="font-14">{{ item.createTime }}</p>
            </div>
            <div class="item-info">
              <p class="font-18-B">{{ item.updateTime }}</p>
              <p class="font-14">更新时间</p>
            </div>
            <div class="item-info">
              <p class="font-18-B">{{ item.sensation }}</p>
              <p class="font-14">管理红人</p>
            </div>
            <div class="item-info">
              <p class="font-18-B">{{ item.product }}</p>
              <p class="font-14">推广产品</p>
            </div>
            <div class="item-info">
              <p class="font-18-B">{{ item.video }}</p>
              <p class="font-14">上线视频</p>
            </div>
            <p class="item-status font-14" :class="{ ing: item.status === 1, pause: item.status === 2 }">
              {{ item.status === 1 ? '进行中' : '已暂停' }}
            </p>
            <div class="btns flex">
              <el-tooltip content="编辑" placement="top" effect="light">
                <i class="iconfont icon-bianji1" @click.stop="openEditPlan(index)"></i>
              </el-tooltip>
              <el-tooltip v-if="item.status === 1" content="暂停计划" placement="top" effect="light">
                <i class="iconfont icon-zanting"></i>
              </el-tooltip>
              <el-tooltip v-if="item.status === 2" content="开启计划" placement="top" effect="light">
                <i class="iconfont icon-bofangliebiao"></i>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" effect="light">
                <i class="iconfont icon-shanchu" @click.stop="delItem(item)"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="pagination flex">
          <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
            :total="form.total" />
        </div>
      </div>
    </div>

    <p class="add flex-center flex-align-items-center pointer" @click="planDetail.show = true">
      <i class="iconfont icon-jiahao"></i>
    </p>
  </div>

  <edit-plan v-if="planDetail.show" :item="planDetail" @close="closeEditPlan"></edit-plan>
</template>

<script setup>
import NoData from '@/components/noData.vue';
import EditPlan from './components/editPlan.vue';
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const statusList = [
  {
    name: '全部',
    value: undefined,
    count: 1
  },
  {
    name: '进行中',
    value: 1,
    count: 1
  },
  {
    name: '已暂停',
    value: 3,
    count: 0
  }
];

const form = ref({
  status: undefined,
  keyword: '',
  total: 100
});
const list = ref([
  {
    id: 1,
    name: '测试1',
    createTime: '2024-01-04',
    updateTime: '2024-01-04 10:35:00',
    sensation: 1,
    product: 0,
    video: 0,
    status: 1,
    desc: '12121'
  }
]);
const planDetail = ref({
  show: false
});

// 切换状态
const statusChange = e => {
  if (form.value.status !== e) {
    form.value.status = e;
  }
}
// 打开编辑计划
const openEditPlan = index => {
  planDetail.value = {
    show: true,
    index,
    ...list.value[index]
  }
}
// 关闭编辑计划
const closeEditPlan = e => {
  if (e !== null) {
    list.value[planDetail.value.index].name = e.name;
    list.value[planDetail.value.index].desc = e.desc;
  }
  planDetail.value.show = !planDetail.value.show;
}
// 弹出删除确认框
const delItem = item => {
  ElMessageBox.confirm(
    '确定要删除[测试1]推广计划吗？删除后，推广计划中的所有内容将被永久删除，无法恢复。请谨慎操作',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const toDetail = id => {
  router.push(`/promotionPlanDetail?id=${id}`);
}
</script>

<style lang="less" scoped>
.plan-desc {
  padding-left: 40px;
  height: 125px;
  background: linear-gradient(140deg, rgba(167, 117, 255, .1), rgba(255, 82, 119, .1));

  h3 {
    color: #12172c;
    line-height: 32px;
    letter-spacing: 1px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  p {
    padding-bottom: 5px;
    color: #555;
    line-height: 16px;
    letter-spacing: 1px;
  }
}

.plan-content {
  height: calc(100vh - 189px);
  background: #fff;
  padding: 20px;

  .status-list {
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    padding: 0 8px;
    height: 44px;

    p {
      padding: 0 16px;
      border-radius: 5px;
      height: 32px;
      color: #666;

      &.active {
        border: 1px solid @main-color;
        color: @main-color;
      }
    }
  }

  .search {
    position: relative;

    &::v-deep .el-input {
      width: 320px;
      height: 44px;
    }

    p {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 44px;
      height: 100%;

      i {
        color: @main-color;
      }
    }
  }

  .list {
    margin-top: 12px;

    .item {
      border: 1px solid #f2f2f2;
      border-radius: 10px;
      padding: 30px 10px;
      height: 100px;
      margin-bottom: 8px;

      &:hover {
        transition: all .5s;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
      }

      .item-info {
        margin-right: 45px;

        &:first-child {
          width: 260px;
          text-align: center;
          padding-right: 25px;
          border-right: 1px solid #f2f3f5;
        }

        p {
          white-space: nowrap;

          &:first-child {
            color: #333;
          }

          &:last-child {
            color: #777;
          }
        }
      }

      .item-status {
        width: 70px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        text-align: center;
        margin-right: 80px;

        &.ing {
          background-color: rgb(241, 251, 247);
          color: rgb(115, 222, 179);
        }

        &.pause {
          background-color: rgb(244, 244, 244);
          color: rgb(154, 154, 154);
        }
      }

      .btns {
        i {
          margin-right: 45px;
          font-size: 30px;
          color: #999;
        }
      }
    }
  }
}

.add {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 20px;
  right: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, #a775ff, #ff5277);
  transition: transform .3s ease-in-out;

  i {
    font-size: 35px;
    color: #fff;
  }
}
</style>
